jQuery Mobile コンポーネントシリーズ #8 「リストビュー基本編2」

前回#7では「リストビュー基本編1」について紹介しました。

前回に引き続き、リストビューについて紹介していきます。
今回は分類や子要素数の表示、サムネイルやアイコンの表示、検索フィルターについてです。

分類の表示

リストに分類を設定するにはリストアイテムに「data-role="list-divider"」を設定します。
文書構造適にはグループ化にはなっていませんが見た目上はグループ化されたように表示されます。

<ul data-role="listview">
	<li data-role="list-divider">A</li>
	<li><a href="#">apple</a></li>
	<li><a href="#">apple</a></li>
	<li><a href="#">apple</a></li>
	<li data-role="list-divider">B</li>
	<li><a href="#">book</a></li>
	<li><a href="#">book</a></li>
	<li><a href="#">book</a></li>
	<li data-role="list-divider">C</li>
	<li><a href="#">cookie</a></li>
	<li><a href="#">cookie</a></li>
	<li><a href="#">cookie</a></li>
</ul>

リスト分類を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

検索フィルター

そのリスト内でフィルターをかけたいときに利用します。設定するのはとても簡単で「data-filter="true"」を指定するだけです。

また、検索フィルターのプレースホルダを設定するにはリストのコンテナに対して「data-filter-placeholder="文字列"」を指定します。

<ul data-role="listview" data-filter="true" data-filter-placeholder="文字列">
	<li><a href="#">apple</a></li>
	<li><a href="#">apple</a></li>
	<li><a href="#">apple</a></li>
	<li><a href="#">book</a></li>
	<li><a href="#">book</a></li>
	<li><a href="#">book</a></li>
	<li><a href="#">cookie</a></li>
	<li><a href="#">cookie</a></li>
	<li><a href="#">cookie</a></li>
</ul>

検索フィルターを開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

アイテム数の表示

アイテム数の表示には表示したいリストに対してclass="ui-li-count"を付けたspanタグを指定します。
自動で数字が入るわけではないので注意が必要です。もちろん数字以外の文字列を入れてもちゃんと表示されます。

<ul data-role="listview">
        <li>
                <a href="#">イタリアン<span class="ui-li-count">10</span></a>
                <ul>
                        <li><a href="#">イタリアン1</a></li>
                        <li><a href="#">イタリアン2</a></li>
                        <li><a href="#">イタリアン3</a></li>
                        <li><a href="#">イタリアン4</a></li>
                        <li><a href="#">イタリアン5</a></li>
                        <li><a href="#">イタリアン6</a></li>
                        <li><a href="#">イタリアン7</a></li>
                        <li><a href="#">イタリアン8</a></li>
                        <li><a href="#">イタリアン9</a></li>
                        <li><a href="#">イタリアン10</a></li>
                </ul>
        </li>
        <li>
                <a href="#">和食<span class="ui-li-count">20</span></a>
                <ul>
                        <li><a href="#">和食1</a></li>
                        <li><a href="#">和食2</a></li>
                        <li><a href="#">和食3</a></li>
                        <li><a href="#">和食4</a></li>
                        <li><a href="#">和食5</a></li>
                        <li><a href="#">和食6</a></li>
                        <li><a href="#">和食7</a></li>
                        <li><a href="#">和食8</a></li>
                        <li><a href="#">和食9</a></li>
                        <li><a href="#">和食10</a></li>
                        <li><a href="#">和食11</a></li>
                        <li><a href="#">和食12</a></li>
                        <li><a href="#">和食13</a></li>
                        <li><a href="#">和食14</a></li>
                        <li><a href="#">和食15</a></li>
                        <li><a href="#">和食16</a></li>
                        <li><a href="#">和食17</a></li>
                        <li><a href="#">和食18</a></li>
                        <li><a href="#">和食19</a></li>
                        <li><a href="#">和食20</a></li>
                </ul>
        </li>
        <li>
                <a href="#">中華<span class="ui-li-count">5</span></a>
                <ul>
                        <li><a href="#">中華1</a></li>
                        <li><a href="#">中華2</a></li>
                        <li><a href="#">中華3</a></li>
                        <li><a href="#">中華4</a></li>
                        <li><a href="#">中華5</a></li>
                </ul>
        </li>
</ul>

アイテム数の表示を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

サムネイル画像表示

リストビューにサムネイル画像を表示するにはaタグ内の最初に画像を置くだけです。自動で横幅80pxに縮小されますが、80*80pxの画像を用意した方が綺麗に表示されます。

<ul data-role="listview">
        <li>
                <a href="#">
                        <img src="http://public-blog-dev.s3.amazonaws.com/wp-content/uploads/2012/03/no-image.png" alt="" title="no-image" width="80" height="80" class="alignnone size-full wp-image-23967" />
                        <h3>apple</h3>
                </a>
        </li>
</ul>

サムネイル画像表示を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

アイコン表示

サムネイル以外にも16*16のアイコンを表示することもできます。アイコンを正しく表示するには対象の画像にclass="ui-li-icon"を指定します。

<ul data-role="listview">
        <li>
                <a href="#">
                        <img src="http://public-blog-dev.s3.amazonaws.com/wp-content/uploads/2012/03/home.png" alt="" title="home" width="16" height="16" class="ui-li-icon alignnone size-full wp-image-23985" />
                        Home
                </a>
        </li>
</ul>

アイコン表示を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

これでリストビュー基本編２はおしまいです。次回は基本編で使ったリストビューを応用した表示方法について紹介します。

参考

• リストビュー